<!DOCTYPE html>
<!-- saved from url=(0059)http://www.17sucai.com/preview/1/2017-06-28/Dati/index.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <title></title>
    <style>
        * { margin: 0; padding: 0; }
        .answer { overflow: hidden; padding: 20px 0; }
        .large-box { border-radius: 10px; padding: 0 10px; background: linear-gradient( -30deg, #0084ad, #39beab); }
        .ans-ul { margin: 0 auto; overflow: hidden; }
        .large-box .edge { width: 100%; background: #fff; height: 14px; margin: 0px -10px 44px -10px; padding: 0px 10px; float: left; position: relative; }
        .large-box .edge div:nth-child(1),  .large-box .edge div:nth-child(2),  .large-box .edge div:nth-child(3),  .large-box .edge div:nth-child(4) { display: block; width: 14px; height: 14px; border-radius: 50px; background: #fff; border: 1px solid #FFFFFF; position: absolute; }
        .large-box .edge div:nth-child(1) { top: -22px; left: 50px; }
        .large-box .edge div:nth-child(2) { top: -22px; right: 50px; }
        .large-box .edge div:nth-child(3) { bottom: -22px; left: 50px; }
        .large-box .edge div:nth-child(4) { bottom: -22px; right: 50px; }
        .large-box .edge div:nth-child(5),  .large-box .edge div:nth-child(6) { display: block; width: 2px; height: 42px; background: #43c4c7; position: absolute; }
        .large-box .edge div:nth-child(5) { left: 57px; top: -14px; }
        .large-box .edge div:nth-child(6) { right: 57px; top: -14px; }
        .large-box p { color: #fff; margin: 20px 0; }
        .large-box li { color: #fff; }
        .large-box li a { color: #fffcb2; font-size: 16px; }
        .large-box a.ans-li { width: 40%; text-align: center; height: 40px; line-height: 40px; border-radius: 20px; margin: 20px 0 50px 0; display: block; border: 1px solid #FFFFFF !important; }
        .ans-no { background: rgba(0, 0, 0, 0); color: #fff; transition: .5s; }
        .large-box a.ans-li:active { background: #fff; color: #43c4c7; transition: .5s; }
        .ans-on { background: #fff; color: #43c4c7; }
        .large-box .ans-y { float: left; }
        .large-box .ans-n { float: right; }
        .ans-again { width: 100% !important; }
        .mask { width: 100%; float: left; margin: 0px -10px; display: none; opacity: 0; }
        .mask-hide { position: fixed; top: 0; left: 0; height: 0px; width: 100%; border-bottom-right-radius: 500px; border-bottom-left-radius: 500px; background: #00FFFF; overflow: auto; opacity: 0; transition: .5s; }
        .test { width: 90vw; height: 40px; background: #0072FF; margin: 10px auto; color: #FFF; background: #39beab; border: none; border-radius: 10px; text-align: center; line-height: 40px; }
        .close { width: 30px; height: 30px; position: fixed; top: 20px; right: 20px; color: #fff; line-height: 30px; text-align: center; border-radius: 20px; background: rgba(0, 0, 0, .5); }
        .mask-show { position: fixed; top: 0; left: 0; height: 100vh; width: 100%; background: #191919; overflow: auto; opacity: 1; transition: .5s; z-index: 1; }
        /*不可点击按钮样式*/
        #mask01 .large-box .ans-not { border: 1px solid #999 !important; color: #999999 !important; }
    </style>
</head>

<body>

<!--不可重复选择js-->
<script type="text/javascript">
    $(function() {
        var answers = {0:'兄弟，肯定闺蜜成群了吧，是不是考虑找个男票了？',1:'有没有女票？是走在去相亲的路上，还是林荫小路上？',2:'介于直与弯之间的你，准备找男票还是女票？',3:'兄弟还没女票吧，要单身一辈子的节奏啊！'};
        var answer_code = 0;

        $("#mask01 .h-button").click(function() { //这里是点击按钮使内容区自动滚动到相应位置
            var ph = $(this).parent().outerHeight(true); //获取下一个出现的内容区域高度
            var ch = $("#mask01 .answer").height(); //获取class  answer的现有高度
            var vh = window.innerHeight; //获取一屏幕高度
            //可很具情况计算你需要的滚动方法
            $("#mask01").animate({
                scrollTop: ch + ph
            }, 500);
        });

        $('#test01').click(function() {
            $('#mask01').removeClass('mask-hide').addClass('mask-show');

        });

        $("#mask01 .ans-li").click(function() {
            if($(this).hasClass('ans-y')){
                answer_code++;
            }
            if($(this).hasClass('ans-end')){
                $('#result').html(answers[answer_code]);
            }
            $(this).parent().next(".large-box").css({
                "display": "block",
                "opacity": "1"
            });
            $(this).addClass("ans-on");
            $(this).siblings("a").addClass("ans-not").unbind("click"); //点击按钮后同级按钮改变样式并清除点击事件
        });

        $("#mask01 .ans-again").click(function() {
            //宠幸定义点击显示事件过程
            var hy = $(function() {
                $("#mask01 .ans-y").click(function() {
                    $(this).parent().children(".y01").css({
                        "display": "block"
                    }).animate({
                        "opacity": "1"
                    });
                    $(this).parent().children(".n01").css({
                        "display": "none"
                    }).animate({
                        "opacity": "1"
                    });


                });
                $("#mask01 .ans-n").click(function() {
                    $(this).parent().children(".n01").css({
                        "display": "block"
                    }).animate({
                        "opacity": "1"
                    });
                    $(this).parent().children(".y01").css({
                        "display": "none"
                    }).animate({
                        "opacity": "1"
                    });
                });
                $("#mask01 .ans-li").click(function() {
                    $(this).addClass("ans-on");
                    $(this).siblings("a").addClass("ans-not").unbind("click");
                });
            });

            $("#mask01 #first .large-box").css({
                "display": "none",
                "opacity": "0"
            });
            $("#mask01 #first").find(".ans-li").removeClass("ans-on ans-not").bind("click", function() {
                hy
            }); //复原所有样式并添加点击事件


            $("#mask").animate({
                scrollTop: 500
            }, 250);
        });

    });
</script>
<!--不可重复选择HTML-->
<div id="mask01">
    <div class="large-box ans-ul " style="display: block;">
        <p>直男测试题</p>
        <p><span style="color:#ffff33;">请慎重回答“正确”或“错误”，这将决定你女票的去向，PS:前提是有女票</span></p>
    </div>
    <div class="answer" onmousemove="" ontouchstart="">

        <div class="large-box ans-ul onebox">
            <div>
                <p>女票说自己皮肤不好，就劝她不要熬夜，并给她一堆护肤资料。</p>
                <a class="h-button ans-li ans-no ans-y">正确</a> <a class="h-button ans-li ans-no ans-n">错误</a>
            </div>
            <div class="large-box mask">
                <div class="edge">
                    <div>&nbsp;</div>
                    <div>&nbsp;</div>
                    <div>&nbsp;</div>
                    <div>&nbsp;</div>
                    <div>&nbsp;</div>
                    <div>&nbsp;</div>
                </div>
                <p>别人问女票体重，女票说忘了，你应该立刻提示她。</p>
                <a class="h-button ans-li ans-end ans-no ans-y">正确</a> <a class="h-button ans-li ans-end ans-no ans-n">错误</a>
            </div>
            <div class="large-box mask">
                <div class="edge">
                    <div>&nbsp;</div>
                    <div>&nbsp;</div>
                    <div>&nbsp;</div>
                    <div>&nbsp;</div>
                    <div>&nbsp;</div>
                    <div>&nbsp;</div>
                </div>
                <p>女票在你家逗留得太晚，不敢回家，你应该主动送她回去。</p>
                <a class="h-button ans-li ans-end ans-no ans-y">正确</a> <a class="h-button ans-li ans-end ans-no ans-n">错误</a>
            </div>
            <div class="large-box mask">
                <div class="edge">
                    <div>&nbsp;</div>
                    <div>&nbsp;</div>
                    <div>&nbsp;</div>
                    <div>&nbsp;</div>
                    <div>&nbsp;</div>
                    <div>&nbsp;</div>
                </div>
                <p id="result"></p>
                <!--<a class="h-button ans-li ans-no ans-again">重新开始</a>-->
            </div>

        </div>
    </div>
    <div style='height:1000px'></div>
</div>

</body>
</html>